<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      {{title}}
      <!-- 根据条件绝对是否渲染当前元素，条件渲染 -->
      <!-- 指令：vue提供了大量的html的自定义属性，实现不同的渲染需求，这种自定义属性，叫指令，通用语法：v-开头 -->
      <p v-if="flag">今年是闰年</p>
      <p v-else>今年不是闰年</p>
      <br>
      <p v-if="num>0">正数</p>
      <p v-else-if="num==0">零</p>
      <p v-else>负数</p>
      <br>
      <p v-show="isShow">显示了么</p>
      <!-- v-if和v-show的区别：show是通过调用css的display控制是否显示，而if是真正的渲染或不渲染 -->
    </div>
	</body>
  <script src="../vue.js"></script>
  <script type="text/javascript">
    const vm = new Vue({
      el:"#app",
      data:{
        title:"hello vue - 指令",
        flag:false,
        num:-3,
        isShow:false
      }
    })
  </script>
</html>
